<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.rect(50, 50, 200, 100) // 绘制矩形
      ctx.stroke() // 描边一个矩形轮廓
      ctx.beginPath() // 开启新路径
      ctx.rect(50, 200, 200, 100) // 绘制矩形
      ctx.fill() // 填充一个矩形
    </script>
  </body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=\, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
        <script>
          const canvas = document.getElementById('canvas') // 获取 Canvas
          const ctx = canvas.getContext('2d') // 获取绘制上下文
          ctx.strokeStle = '#f00' // 描边样式设置为红色
          ctx.rect(50, 50, 200, 100) // 绘制矩形
          ctx.stroke() // 绘制一个矩形轮廓
          ctx.beginPath() // 开启新路径
          ctx.fillStyle = '#0f0' // 描边样式设置为绿色
          ctx.rect(50, 200, 200, 100) // 绘制矩形
          ctx.fill() // 填充一个矩形
        </script>
      </body>
    </html>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边样式设置为红色

      // 矩形一
      ctx.rect(50, 50, 200, 100) // 绘制矩形
      ctx.stroke() // 绘制一个矩形轮廓

      // 矩形二
      ctx.beginPath() // 开启新路径
      ctx.rect(50, 200, 200, 100) // 绘制矩形
      ctx.stroke() // 描边一个矩形轮廓

      // 矩形三
      ctx.beginPath() // 开启一个新路径
      ctx.strokeStyle = '#00f' // 描边样式重新设置为蓝色
      ctx.rect(50, 350, 200, 100) // 绘制矩形
      ctx.stroke() // 描边一个矩形轮廓
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文

      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      // 画一条 (50,50) 到 (400,50) 的直线
      ctx.moveTo(50, 50)
      ctx.lineTo(400, 50)
      ctx.stroke()

      // 连续的直线只需要设置一个起始点
      ctx.moveTo(50, 100)
      ctx.lineTo(50, 400)
      ctx.lineTo(400, 400)
      ctx.stroke()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文'
      ctx.strokeStyle = '#f00'

      // 画一条 (50,50) 到 (400,50) 的直线
      ctx.moveTo(50, 50)
      ctx.lineTo(400, 50)
      ctx.stroke()

      ctx.beginPath() // 开启新路径

      // 连续的直线只需要设置一个起始点
      ctx.lineWidth = 10
      ctx.moveTo(50, 100)
      ctx.lineTo(50, 400)
      ctx.lineTo(400, 400)
      ctx.stroke()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文'
      ctx.strokeStyle = '#f00' // 描边样式设置为红色

      // lineCap 值为 butt
      ctx.lineWidth = 20
      ctx.lineCap = 'butt'
      ctx.moveTo(50, 50)
      ctx.lineTo(400, 50)
      ctx.stroke()

      // lineCap 值为 round
      ctx.beginPath()
      ctx.lineWidth = 20
      ctx.lineCap = 'round'
      ctx.moveTo(50, 100)
      ctx.lineTo(400, 100)
      ctx.stroke()

      // lineCap 值为 square
      ctx.beginPath()
      ctx.lineWidth = 20
      ctx.lineCap = 'square'
      ctx.moveTo(50, 150)
      ctx.lineTo(400, 150)
      ctx.stroke()
    </script>
  </body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文'
      ctx.strokeStyle = '#f00' // 描边样式设置为红色

      // miterLimit 为定值，角度越大
      ctx.beginPath()
      ctx.lineWidth = 5
      ctx.lineJoin = 'miter'
      ctx.miterLimit = 10
      ctx.moveTo(0, 100)
      for (i = 0; i < 50; i++) {
        var dy = i % 2 == 0 ? 200 : 100
        ctx.lineTo(Math.pow(i, 1.5) * 2, dy)
      }
      ctx.stroke()
      ctx.closePath()
    </script>
  </body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文'
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.lineWidth = 5

      // 绘制一条线
      ctx.setLineDash([5, 10, 20])
      console.log(ctx.getLineDash())
      ctx.beginPath()
      ctx.moveTo(0, 100)
      ctx.lineTo(500, 100)
      ctx.stroke()

      // 再绘制一条虚线
      ctx.setLineDash([5, 10, 20, 40])
      console.log(ctx.getLineDash())
      ctx.beginPath()
      ctx.moveTo(0, 200)
      ctx.lineTo(500, 200)
      ctx.stroke()
    </script>
  </body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文'
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.lineWidth = 5

      // 绘制一条虚线
      ctx.setLineDash([5, 10, 20, 40])
      console.log(ctx.getLineDash())
      ctx.beginPath()
      ctx.moveTo(0, 100)
      ctx.lineTo(400, 100)
      ctx.stroke()

      // 再绘制一条虚线
      ctx.setLineDash([5, 10, 20, 40])
      ctx.lineDashOffset = 15
      ctx.beginPath()
      ctx.moveTo(0, 300)
      ctx.lineTo(400, 300)
      ctx.stroke()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或者更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文'
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.fillStyle = '#00f' // 填充样式设置为蓝色
      ctx.lineWidth = 5

      // 绘制一个三角形
      ctx.moveTo(50, 100)
      ctx.lineTo(50, 400)
      ctx.lineTo(400, 400)
      ctx.lineTo(50, 100)
      ctx.stroke()

      // 如果是填充一个三角形，则只需要两条直线就行，它会默认闭合
      ctx.beginPath()
      ctx.moveTo(200, 200)
      ctx.lineTo(400, 200)
      ctx.lineTo(400, 370)
      ctx.fill()
    </script>
  </body>
</html> -->
